<template>
  <el-dialog   :visible.sync="visible" :title="title"  width="800px"  :before-close="handleClose" :modal="false" >
    <div id="printContent" style="width: 100%;">
        <table style="width: 750px;" class="tab"  run="all">
          <th colspan="8">
            <h2>财务报销单</h2>
          </th>
          <tr>
            <td class="tdtitle">所属部门</td>
            <td class="tdcontent" colspan="3">{{zyxSendorder.wxsname}}</td>
            <td class="tdtitle">单位名称</td>
            <td class="tdcontent" colspan="3">{{zyxSendorder.zyxDevice.unitname}}</td>
          </tr>

          <tr>
            <td class="tdtitle">派工单号</td>
            <td class="tdcontent">{{zyxSendorder.orderno}}</td>
            <td class="tdtitle">设备型号</td>
            <td class="tdcontent">{{zyxDevice.devicemodel}}</td>
            <td class="tdtitle">使用科室</td>
            <td class="tdcontent">{{zyxSendorder.zyxDevice.useofficename}}</td>
            <td class="tdtitle">派工类别</td>
            <td class="tdcontent">{{zyxSendorder.zyxDevice.useofficename}}</td>
          </tr>
          <tr>
            <td class="tdtitle">办公费</td>
            <td class="tdcontent" colspan="7">{{sumcost1}}</td>
          </tr>
          <tr>
            <td class="tdtitle" style="text-align: center;">项目</td>
            <td class="tdtitle" style="text-align: center;" colspan="2">日期</td>
            <td class="tdtitle" style="text-align: center;" colspan="4">项目说明</td>
            <td class="tdtitle" style="text-align: center;" >金额</td>
          </tr>
          <tr v-for="(item,index) in cost1" :key="index" >
            <td class="tdcontent" style="text-align: center;">{{index+1}}</td>
            <td class="tdcontent" colspan="2">{{cost1[index].costdate}}</td>
            <td class="tdcontent" colspan="4">{{cost1[index].remark}}</td>
            <td class="tdcontent">{{cost1[index].cost}}</td>
          </tr>

          <tr>
            <td class="tdtitle">零配件<br>工具费用</td>
            <td class="tdcontent" colspan="7">{{sumcost2}}</td>
          </tr>
          <tr>
            <td class="tdtitle" style="text-align: center;">项目</td>
            <td class="tdtitle" style="text-align: center;" colspan="2">日期</td>
            <td class="tdtitle" style="text-align: center;" colspan="4">项目说明</td>
            <td class="tdtitle" style="text-align: center;" >金额</td>
          </tr>
          <tr v-for="(item,index) in cost2" :key="index" >
            <td class="tdcontent" style="text-align: center;">{{index+1}}</td>
            <td class="tdcontent" colspan="2">{{cost2[index].costdate}}</td>
            <td class="tdcontent" colspan="4">{{cost2[index].remark}}</td>
            <td class="tdcontent">{{cost2[index].cost}}</td>
          </tr>

          <tr>
            <td class="tdtitle">住宿费用</td>
            <td class="tdcontent" colspan="7">{{sumcost3}}</td>
          </tr>
          <tr>
            <td class="tdtitle" style="text-align: center;">项目</td>
            <td class="tdtitle" style="text-align: center;" colspan="2">日期</td>
            <td class="tdtitle" style="text-align: center;" colspan="4">项目说明</td>
            <td class="tdtitle" style="text-align: center;" >金额</td>
          </tr>
          <tr v-for="(item,index) in cost3" :key="index" >
            <td class="tdcontent" style="text-align: center;">{{index+1}}</td>
            <td class="tdcontent" colspan="2">{{cost3[index].costdate}}</td>
            <td class="tdcontent" colspan="4">{{cost3[index].remark}}</td>
            <td class="tdcontent">{{cost3[index].cost}}</td>
          </tr>


          <tr>
            <td class="tdtitle">交通费</td>
            <td class="tdcontent" colspan="7">{{sumcost4}}</td>
          </tr>
          <tr>
            <td class="tdtitle" style="text-align: center;">项目</td>
            <td class="tdtitle" style="text-align: center;" colspan="2">日期</td>
            <td class="tdtitle" style="text-align: center;" colspan="4">项目说明</td>
            <td class="tdtitle" style="text-align: center;" >金额</td>
          </tr>
          <tr v-for="(item,index) in cost4" :key="index" >
            <td class="tdcontent" style="text-align: center;">{{index+1}}</td>
            <td class="tdcontent" colspan="2">{{cost4[index].costdate}}</td>
            <td class="tdcontent" colspan="4">{{cost4[index].remark}}</td>
            <td class="tdcontent">{{cost4[index].cost}}</td>
          </tr>

          <tr>
            <td class="tdtitle">接待费</td>
            <td class="tdcontent" colspan="7">{{sumcost5}}</td>
          </tr>
          <tr>
            <td class="tdtitle" style="text-align: center;">项目</td>
            <td class="tdtitle" style="text-align: center;" colspan="2">日期</td>
            <td class="tdtitle" style="text-align: center;" colspan="4">项目说明</td>
            <td class="tdtitle" style="text-align: center;" >金额</td>
          </tr>
          <tr v-for="(item,index) in cost5" :key="index" >
            <td class="tdcontent" style="text-align: center;">{{index+1}}</td>
            <td class="tdcontent" colspan="2">{{cost5[index].costdate}}</td>
            <td class="tdcontent" colspan="4">{{cost5[index].remark}}</td>
            <td class="tdcontent">{{cost5[index].cost}}</td>
          </tr>

          <tr>
            <td class="tdtitle">其他费用</td>
            <td class="tdcontent" colspan="7">{{sumcost6}}</td>
          </tr>
          <tr>
            <td class="tdtitle" style="text-align: center;">项目</td>
            <td class="tdtitle" style="text-align: center;" colspan="2">日期</td>
            <td class="tdtitle" style="text-align: center;" colspan="4">项目说明</td>
            <td class="tdtitle" style="text-align: center;" >金额</td>
          </tr>
          <tr v-for="(item,index) in cost6" :key="index" >
            <td class="tdcontent" style="text-align: center;">{{index+1}}</td>
            <td class="tdcontent" colspan="2">{{cost6[index].costdate}}</td>
            <td class="tdcontent" colspan="4">{{cost6[index].remark}}</td>
            <td class="tdcontent">{{cost6[index].cost}}</td>
          </tr>

          <tr>
            <td class="tdtitle">费用总计</td>
            <td class="tdcontent" colspan="7" >{{sumcost}}</td>
          </tr>
          <tr>
            <td class="tdtitle">报销人</td>
            <td class="tdcontent" colspan="2">{{zyxSendorder.membername}}</td>
            <td class="tdtitle">审核人</td>
            <td class="tdcontent" colspan="2"></td>
            <td class="tdtitle">签字</td>
            <td class="tdcontent"></td>
          </tr>
          <tr>
            <td class="tdtitle">日期</td>
            <td class="tdcontent" colspan="2"></td>
            <td class="tdtitle">日期</td>
            <td class="tdcontent" colspan="2"></td>
            <td class="tdtitle">日期</td>
            <td class="tdcontent"></td>
          </tr>
        </table>
     </div>
    <div slot="footer" class="dialog-footer">
     <el-button type="primary" v-print="'#printContent'">打&nbsp;&nbsp;印</el-button>
     </div>
  </el-dialog>
</template>

<script>
  import {getBillBySendOrderId,} from "@/api/zyx/bill";
  import { getNoPageList } from "@/api/zyx/cost";
  export default {
     data() {
       return {
         sumcost:0,
         imglist:[],
         visible: false,
         title:'',
         zyxSendorder:{},
         zyxDevice:{},
         orderbill:{},
         // 设备类别字典字典
         devicetypeOptions: [],
         devicetypename:'',
         evaluatename:'',
         // 查询参数
         queryParams: {
           costtype: null,
           sendorderid: null,
         },
          cost1:[],
          cost2:[],
          cost3:[],
          cost4:[],
          cost5:[],
          cost6:[],
          sumcost1:null,
          sumcost2:null,
          sumcost3:null,
          sumcost4:null,
          sumcost5:null,
          sumcost6:null,
         }
     },
     methods:{
       getname(){
         this.getDicts("zyx_devicetype").then(response => {
           this.devicetypeOptions = response.data;
           // this.zyxDevice=response.data.zyxDevice

           this.devicetypename= this.selectDictLabel(this.devicetypeOptions, this.zyxDevice.devicetype);

         });

       },
      /** 查询费用明细列表 */
      getList1() {
        this.sumcost=0;
        this.queryParams.sendorderid=this.zyxSendorder.id;
        this.queryParams.costtype='1'
        getNoPageList(this.queryParams).then(response => {
          this.cost1 = response.list;
          this.sumcost1=response.sum;
          this.sumcost=Number(this.sumcost)+ Number(this.sumcost1)
        });
      },
      /** 查询费用明细列表 */
      getList2() {
        this.queryParams.sendorderid=this.zyxSendorder.id;
        this.queryParams.costtype='2'
        getNoPageList(this.queryParams).then(response => {
          this.cost2 = response.list;
          this.sumcost2=response.sum;
          this.sumcost=Number(this.sumcost)+ Number(this.sumcost2)
        });
      },
      getList3() {
        this.queryParams.sendorderid=this.zyxSendorder.id;
        this.queryParams.costtype='3'
        getNoPageList(this.queryParams).then(response => {
          this.cost3 = response.list;
          this.sumcost3=response.sum;
          this.sumcost=Number(this.sumcost)+ Number(this.sumcost3)
        });
      },
      getList4() {
        this.queryParams.sendorderid=this.zyxSendorder.id;
        this.queryParams.costtype='4'
        getNoPageList(this.queryParams).then(response => {
          this.cost4 = response.list;
          this.sumcost4=response.sum;
          this.sumcost=Number(this.sumcost)+ Number(this.sumcost4)
        });
      },
      getList5() {
        this.queryParams.sendorderid=this.zyxSendorder.id;
        this.queryParams.costtype='5'
        getNoPageList(this.queryParams).then(response => {
          this.cost5 = response.list;
          this.sumcost5=response.sum;
          this.sumcost=Number(this.sumcost)+ Number(this.sumcost5)
        });
      },
      getList6() {
        this.queryParams.sendorderid=this.zyxSendorder.id;
        this.queryParams.costtype='6'
        getNoPageList(this.queryParams).then(response => {
          this.cost6 = response.list;
          this.sumcost6=response.sum;
          this.sumcost=Number(this.sumcost)+ Number(this.sumcost6)
        });
      },
      // component
      openDialog() {
        this.queryParams.sendorderid=this.zyxSendorder.id;
        this.queryParams.costtype='1'
        getNoPageList(this.queryParams).then(response => {
          console.log('response',response)
          this.cost1 = response.list;
          this.sumcost1=response.sum;
        });

      },

       print(){
         this.$print(this.$refs.print,{});
       },
       // /** 修改按钮操作 */
       // getinfo(row) {
       //   this.reset();
       //   const id = row.id || this.ids
       //   getMember(id).then(response => {
       //     this.form = response.data;
       //     this.open = true;


       //     this.title = "修改成员基础信";
       //   });
       // },
     }
    }
</script>

<style>
   .tab  tr td { border:1px solid #000000; }
   .tdcontent{ text-align:left;width: 220px;padding-left: 5px;font-weight: 250;}
   .tdtitle{text-align: right;width: 260px;font-weight: 500;}
   .tab  {  min-height: 40px; line-height: 25px; text-align: center; border-collapse: collapse; }
</style>
